{% extends "base.html" %}
{% block content %}
<script src="/inc/waf.js"></script>
{% if manage_rules == '1' %}
	{% from 'include/input_macros.html' import input, checkbox %}
	<table class="overview" id="waf_rules">
		<tr class="overviewHead">
			<td class="padding10 first-collumn">
				Rule name
			</td>
			<td style="width: 100px;">
				Enabled
			</td>
			<td>
				Description
			</td>
		</tr>
		{% for r in rules %}
		<tr class="{{ loop.cycle('odd', 'even') }}" id="rule-{{r.0}}">
			<td class="padding10 first-collumn">{{r.1}}</td>
			<td class="checkbox">
				{% set id = 'rule_id-' + r.0|string() %}
				{% if r.2 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td style="padding-top: 5px;padding-bottom: 10px;">{{r.3}}</td>
		</tr>
		{% endfor %}
	</table>
{% else %}
	<style>
	.alert-danger {
		width: 450px;
		display: inline-block;
		height: 25px;
		padding-top: 0px;
	}
	</style>
	<script>
		$("#secIntervals").css("display", "none");
		var ip = []
		var hostnamea = []
		{% for s in servers_all %}
			ip.push("{{s[2]}}");
			var host = "{{s[1]}}";
			host = host.replace(/\./g, '\\.');
			hostnamea.push(host);
		{% endfor %}
	</script>
	{% if servers_all|length == 0 %}
		{% include 'include/getstarted.html' %}
	{% else %}
	<table class="overview">
		<tr class="overviewHead">
			<td class="padding10 first-collumn">
				Server
			</td>
			<td class="padding10">
				Actions
			</td>
			<td class="padding10">
				WAF mode
			</td  class="padding10">
			<td>
				Metrics
			</td>
			<td>
				Manage rules
			</td>
			<td>
				<a onclick="showOverviewWaf(ip, hostnamea)" title="Refresh" style="float: right; margin-right: 25px;">
					<span class="service-reload"></span>
				</a>
			</td>
		</tr>
		{% for s in servers_all %}
			<tr class="{{ loop.cycle('odd', 'even') }}" id="{{s[1]}}"></tr>
		{% endfor %}
	</table>

	<link href="/inc/chart.min.css" rel="stylesheet">
	<script src="/inc/overview.js"></script>
	<script src="/inc/metrics.js"></script>
	<script src="/inc/chart.min.js"></script>
	<div id="refresh" style="text-align: right;margin-top: 20px;margin-right: 20px;" title="Refresh metrics" onclick="showWafMetrics()">
		<span class="service-reload"></span>
	</div>
	{% for s in servers %}
	<div class="chart-container">
		<canvas id="s_{{s.0}}" role="img"></canvas>
	</div>
	{% endfor %}
	<div id="dialog-confirm" style="display: none;">
	  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:3px 12px 20px 0;"></span>Are you sure?</p>
	</div>
	<script>
		function showWafMetrics() {
			{% for s in servers %}
				getWafChartData('{{s.0}}');
			{% endfor %}
		}
		showWafMetrics();
		showOverviewWaf(ip, hostnamea);
	</script>
	<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px; clear: both;">
		You can read the description and watch a video about WAF <a href="https://haproxy-wi.org/description.py?description=waf" title="WAF" target="_blank">here</a>
	</div>
	{% endif %}
{% endif %}
{% endblock %}